'use client';

import { useState } from "react";
import { ConfigProvider } from '@arco-design/web-react';
import Sidebar, { MobileMenuButton } from "@/components/Sidebar";
interface ClientLayoutProps {
  children: React.ReactNode;
}

export default function ClientLayout({ children }: ClientLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
  const closeSidebar = () => setSidebarOpen(false);

  // 主题配置
  const themeConfig = {
    theme: {
      primaryColor: '#0c554a',
    },
  };

  return (
    <ConfigProvider {...themeConfig}>
      <div className="flex h-screen bg-gray-50">
        <Sidebar 
          isOpen={sidebarOpen} 
          onToggle={toggleSidebar} 
          onClose={closeSidebar} 
        />
        <main className="flex-1 lg:ml-64 overflow-auto">
          {/* 移动端头部 */}
          <div className="lg:hidden bg-white border-b border-gray-200 px-4 py-3">
            <div className="flex items-center justify-between">
              <MobileMenuButton onClick={toggleSidebar} />
              <h1 className="text-lg font-semibold text-gray-900">国家电网协同进化平台</h1>
              <div className="w-8"></div> {/* 占位元素保持居中 */}
            </div>
          </div>
          
          {/* 主内容区域 */}
          <div className="p-4 lg:p-6">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 lg:p-6 min-h-[calc(100vh-8rem)] lg:min-h-[calc(100vh-6rem)]">
              {children}
            </div>
          </div>
        </main>
      </div>
    </ConfigProvider>
  );
} 